<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/all-area.css" />
	</head>
	<body style="window:200vw;">
<img class="all-area" src="img/twtw.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="152,385,50" href ="venus.html" alt="Venus" onmouseover="console.log('这是猪耳朵')" />
  <area shape="rect" coords="163,451,293,618" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪头肉')"/>
  <area shape="rect" coords="320,308,467,441" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪颈肉')"/>
  <area shape="rect" coords="331,471,477,617" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪前腿肉')"/>
  <area shape="rect" coords="367,700,391,771" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪蹄')"/>
  <area shape="rect" coords="490,274,778,490" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪背肉')"/>
  <area shape="circle" coords="545,549,70" href ="venus.html" alt="Venus" onmouseover="console.log('这是猪腰')" />
  <area shape="circle" coords="726,585,90" href ="venus.html" alt="Venus" onmouseover="console.log('这是猪腹肉')" />
  <area shape="circle" coords="897,426,100" href ="venus.html" alt="Venus" onmouseover="console.log('这是猪后腿')" />
  <area shape="rect" coords="945,678,987,766" href ="mercur.html" alt="Mercury"  onmouseover="console.log('这是猪蹄')"/>
</map>
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
	<script>
    $("body").click(function(e){
         console.log(e.clientX);
         console.log(e.clientY);
    })
</script>
</html>
